<template>
  <el-dialog :title="dialogTitle" :visible.sync="visible" width="700px" :close-on-click-modal="false">
    <el-form :model="formData" ref="invoiceFrom" :rules="rules" class="invoice-detail" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单号:" required>
            <span>{{ formData.order_id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单金额:" required>
            <span>{{ formData.amount | formatMoney }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="发票类型:" prop="invoice_type">
        <el-select v-if="isAdd" v-model="formData.invoice_type" placeholder="请选择发票类型">
          <el-option v-for="value in invoiceTypeOptions" :key="value[0]" :label="value[1]" :value="value[0]"></el-option>
        </el-select>
        <span v-else>{{ invoiceTypeOptions.get(formData.invoice_type) }}</span>
      </el-form-item>

      <el-form-item label="开票主体:" prop="invoice_issuer">
        <el-select v-if="isAdd" v-model="formData.invoice_issuer" placeholder="请选择开票主体">
          <el-option v-for="value in invoiceIssuerOptions" :key="value[0]" :label="value[1]" :value="value[0]"></el-option>
        </el-select>
        <span v-else>{{ invoiceIssuerOptions.get(formData.invoice_issuer) }}</span>
      </el-form-item>

      <template v-if="formData.invoice_issuer === 2">
        <el-form-item label="公司名称:" prop="company_name" key="company_name">
          <el-input v-if="isEdit" v-model.trim="formData.company_name" :maxLength="128" placeholder="请输入公司名称" />
          <span v-else>{{ formData.company_name }}</span>
        </el-form-item>
        <el-form-item label="税号:" prop="tax_number" key="tax_number">
          <el-input v-if="isEdit" v-model.trim="formData.tax_number" :maxLength="20" placeholder="请输入税号" />
          <span v-else>{{ formData.tax_number }}</span>
        </el-form-item>
      </template>
      <el-form-item v-if="formData.invoice_issuer === 1" label="个人姓名" prop="personal_name" key="personal_name">
        <el-input v-if="isEdit" v-model.trim="formData.personal_name" :maxLength="128" placeholder="请输入个人姓名" />
        <span v-else>{{ formData.personal_name }}</span>
      </el-form-item>

      <el-form-item label="收票邮箱:" prop="email">
        <el-input v-if="isEdit" v-model.trim="formData.email" :maxLength="256" placeholder="请输入收票邮箱" />
        <span v-else>{{ formData.email }}</span>
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input v-if="isEdit" v-model.trim="formData.address" :maxLength="256" placeholder="请输入地址" />
        <span v-else>{{ formData.address }}</span>
      </el-form-item>
      <el-form-item label="电话:" prop="phone">
        <el-input v-if="isEdit" v-model.trim="formData.phone" placeholder="请输入电话" />
        <span v-else>{{ formData.phone }}</span>
      </el-form-item>

      <template v-if="formData.invoice_issuer === 2">
        <el-form-item label="开户银行:" prop="bank">
          <el-input v-if="isEdit" v-model.trim="formData.bank" :maxLength="64" placeholder="请输入开户银行" />
          <span v-else>{{ formData.bank }}</span>
        </el-form-item>
        <el-form-item label="银行账户:" prop="bank_account">
          <el-input v-if="isEdit" v-model.trim="formData.bank_account"  :maxLength="30" placeholder="请输入银行账户" />
          <span v-else>{{ formData.bank_account }}</span>
        </el-form-item>
      </template>

      <el-form-item label="备注:" prop="remark">
        <el-input v-if="isEdit" v-model.trim="formData.remark"  :maxLength="256" placeholder="请输入备注" type="textarea" rows="2" />
        <span v-else>{{ formData.remark }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submiting">确认</el-button>
      <el-button @click="visible=false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { invoiceUpdate, invoiceAdd } from '@/api/invoice'

export default {
  name: 'InvoiceDetail',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: 'edit'
    },
    row: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      submiting: false,
      formData: {
        order_id: null,
        amount: 0,
        invoice_type: null,
        invoice_issuer: null,
        company_name: null,
        tax_number: null,
        personal_name: null,
        email: null,
        address: null,
        phone: null,
        bank: null,
        bank_account: null,
        remark: null
      },
      rules: {
        order_id: [
          { required: true, message: '请选择订单', trigger: 'change' }
        ],
        amount: [{ required: true, message: '', trigger: 'node' }],
        invoice_type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
        invoice_issuer: [{ required: true, message: '请选择开票主体', trigger: 'change' }],
        company_name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        tax_number: [
          { required: true, message: '请输入税号', trigger: 'blur' },
          { pattern: /^[A-Z0-9]{1,20}$/, message: '必须是数字或大写字母', trigger: 'blur' }
        ],
        personal_name: [{ required: true, message: '请输入个人姓名', trigger: 'blur' }],
        email: [{ required: true, type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
        phone: [{ pattern: /^(1[3-9]\d{9}|(0\d{2,3}-?)?\d{7,8}(-\d{3,4})?)$/, message: '请输入正确的手机号码', trigger: 'blur' }],
        bank_account: [{ pattern: /^[A-Za-z0-9]+$/, message: '请输入正确的银行账户', trigger: 'blur' }]
      },
      invoiceTypeOptions: new Map([
        [26, '普通发票'],
        [27, '专用发票']
      ]),
      invoiceIssuerOptions: new Map([
        [1, '个人'],
        [2, '公司']
      ])
    }
  },
  computed: {
    visible: {
      get () {
        return this.open
      },
      set (val) {
        this.$emit('update:open', val)
      }
    },
    dialogTitle () {
      switch (this.openType) {
        case 'edit':
          return '修改'
        case 'add':
          return '申请开票'
        default:
          return '详情'
      }
    },
    isAdd () {
      return this.openType === 'add'
    },
    isEdit () {
      return ['edit', 'add'].includes(this.openType)
    }
  },
  watch: {
    visible (val) {
      if (val) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = this.row[key] ?? this.formData[key]
        })
      } else {
        this.resetForm('invoiceFrom')
      }
    }
  },
  methods: {
    submitForm () {
      if (!this.isEdit) {
        this.visible = false
        return
      }
      this.$refs.invoiceFrom.validate((valid) => {
        if (!valid) return
        this.submiting = true
        const { invoice_issuer, company_name, personal_name } = this.formData
        const invoice_header = invoice_issuer === 2 ? company_name : personal_name
        const params = Object.assign({
          invoice_header
        }, this.formData)
        const method = this.isAdd ? invoiceAdd : invoiceUpdate
        const title = this.isAdd ? '开票申请已提交, 请联系财务审核开票' : '修改成功'
        method(params).then(() => {
          this.msgSuccess(title)
          this.visible = false
          this.$emit('handleSuccess')
        }).finally(() => {
          this.submiting = false
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.invoice-detail {
  .el-select,
  .el-input,
  .el-textarea {
    width: 320px;
  }
}
</style>
